<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>todolist</title>
	    <script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="todo">
		<div>
		<input type="text" v-model="inputValue" />
		<button @click="pushclick">添加</button>
		</div>
		<ul>
			<todo-item v-bind:contents="item" v-for="item in list"></todo-item>
		</ul>
		</div>
		<script>
			var TodoItem = {
				props:['contents'],  //从自己跟父级通信,props:外部接收的数据
				template:"<li>{{contents}}</li>"
			}
			
			var todolist = new Vue({
				el:"#todo",
				components:{
                 	TodoItem:TodoItem
                },
				data:{
					inputValue:"",
					list:[]
				},
                 methods:{
                 	pushclick:function(){
                      this.list.push(this.inputValue)	//点击后向list数组内传入inputValue值
                      this.inputValue = " "
                 	}
                 }
			})
		</script>
	</body>
</html>
